<template>
  <div class="top-list bg-white items-center">
    <div class="name">
      <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/top-name.png" alt="" class="img">
    </div>
    <div class="item flex-row items-center" v-for="(item, index) in data" :key="`top${index}`">
      <img :src="item.img" alt="" class="img" mode="widthFix">
      <div class="top-info flex-col">
        <span class="top-name">{{item.name}}</span>
        <span class="top-text">{{item.text}}万人+参与</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '电脑热租榜',
            text: 8,
            img: 'https://pages.shengniuuz.com/ShengNiuYouZu/images/imgs/goodsDeatil/G3.png'
          },
          {
            name: '手机热租榜',
            text: 5,
            img: 'https://pages.shengniuuz.com/ShengNiuYouZu/images/imgs/goodsDeatil/iPhone12.png'
          },
          {
            name: '游戏机热租榜',
            text: 3,
            img: 'https://pages.shengniuuz.com/ShengNiuYouZu/images/imgs/goodsDeatil/switch.png'
          }
        ]
      }
    }
  }
</script>
<style lang="scss">
  .top-list {
    width: 100%;
    height: 39px;
    margin-top: 4px;
    .name {
      width: 54px;
      height: 19px;
      margin-left: 19px;
      margin-right: 12px;
      .img {
        width: 54px;
        height: 19px;
      }
    }
    .item {
      margin-right: 16px;
      .img {
        width: 27px;
      }
      &:nth-child(2) {
        .img {
          width: 29px;
        }
      }
      &:nth-child(3) {
        .img {
          width: 36px;
        }
      }
      .top-info {
        margin-left: 3px;
        .top-name {
          font-size: 9px;
          font-weight: 500;
          line-height: 13px;
        }
        .top-text {
          font-size: 7px;
          line-height: 10px;
          color: #7F7F7F;
          margin-top: 1px;
        }
      }
    }
  }
</style>
